<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>
  <body>
    <!-- <button onclick="console.log(event)">btn</button> -->
    <div id="app">
      <button v-on:click="counter += 1">Add 1</button>
      <button v-on:click="greet">greet</button>
      <button v-on:click="greet($event)">greet()</button>
      <button v-on:click="greeting('123')">greeting('123')</button>
      <button v-on:click="greeting('456', $event)">greeting('456')</button>
      <p>The button above has been clicked {{ counter }} times.</p>

      <hr />
      <a href="http://www.baidu.com" v-on:click.prevent="greet">百度</a>

      <hr />
      <div class="grand" @click.stop="grand">
        grand
        <div class="parent" @click.capture="parent">
          parent
          <div class="child" @click.stop="child">child</div>
        </div>
      </div>

      <hr />
      <div class="parent" @click.self="parent">
        parent
        <div class="child">child</div>
      </div>
    </div>

    <style>
      .grand {
        width: 150px;
        height: 150px;
        background-color: lightblue;
      }
      .parent {
        width: 100px;
        height: 100px;
        background-color: rgb(156, 30, 51);
      }
      .child {
        width: 50px;
        height: 50px;
        background-color: rgb(175, 199, 39);
      }
    </style>

    <!--  1 $event 代指原始的 DOM 事件对象 -->

    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          counter: 0,
        },
        methods: {
          greet: function (event) {
            console.log(123, event);
          },
          greeting: function (n, event) {
            console.log("greeting", n, event);
          },
          grand: function () {
            console.log("grand");
          },
          parent: function () {
            console.log("parent");
          },
          child: function () {
            console.log("child");
          },
        },
      });
    </script>
  </body>
</html>
